import { Table, useModal, type ColumnProps } from '../../../functionalComponent';
import { cssVar, Layout, iup, useRefs } from '../../../util';
import { QueryPanel } from '../../query-panel';

const queryItems = [
  {
    xtype: 'Input',
    label: '',
    name: 'keyword',
    placeholder: '按关键字查询'
  }
];

const columns: ColumnProps[] = [
  { dataIndex: 'ruleNo', title: '编码' },
  { dataIndex: 'ruleName', title: '名称' },
  { dataIndex: 'targetBizName', title: '目的表单' }
];

/**
 * 单据转换关系帮助
 */
export function ConvertListHelp({ dataSource }) {
  const [ins] = useModal();
  const [getRef] = useRefs();

  const onSearch = (_, { keyword }) => {
    getRef('table').current.getApi().filter(keyword);
  };

  ins.setApi({
    async getResult() {
      const ds = getRef('table').current.getApi().getSelectedData() || [];
      if (ds?.length) {
        return ds[0];
      } else {
        iup.alert('请先选择数据行！');
      }
      return null;
    }
  });

  return (
    <Layout direction="column" autoFit style={{ padding: 5 }}>
      <QueryPanel items={queryItems} onSearch={onSearch} style={{ marginBottom: -11 }} />
      <Layout.Flex style={{ border: cssVar.border, borderRadius: 4 }}>
        <Table showRowNumber columns={columns} ref={getRef('table')} dataSource={dataSource} />
      </Layout.Flex>
    </Layout>
  );
}
